<template>
  <a-layout>
    <a-layout-header style=" background: #9dd6f1;">
            <p style="position: absolute;color:#fff;font-weight:600;font-size:24px">双创基地服务管理平台</p>
      <a-col :span="4" :offset="19">
        <a-row>
          <a-dropdown>
            <a
              class="ant-dropdown-link"
              @click="(e) => e.preventDefault()"
              style="color: #000; float: left;"
            >
              欢迎, {{ username }}<a-icon type="down" />
            </a>
            <a-menu slot="overlay">
              <a-menu-item>
                <a href="javascript:;">用户设置</a>
              </a-menu-item>
              <a-menu-item>
                <a @click="handleCommand()">退出</a>
              </a-menu-item>
            </a-menu>
          </a-dropdown>
        </a-row>
      </a-col>
    </a-layout-header>
    <a-layout>
      <a-layout-sider style="flex: 0 0 300px; width: 300px; max-width: 300px; max-height:100%;">
        <MenuBar></MenuBar>
      </a-layout-sider>
      <a-layout-content class="home-sider">
        <router-view></router-view>
      </a-layout-content>
    </a-layout>
    <a-layout-footer>Footer</a-layout-footer>
  </a-layout>
</template>

<script>
import { log } from "util";
import MenuBar from "../../components/MenuBar";
export default {
  data() {
    return {
      username: sessionStorage.getItem("username"),
    };
  },
  name: "Home",
  methods: {
    handleCommand() {
      console.log(123);
      this.$router.push("/Login");
    },
  },
  components: {
    MenuBar,
  },
};
</script>

<style lang="scss" scoped>
.home-sider {
  height: 100%;
}
#components-layout-demo-basic {
  text-align: center;
}
#components-layout-demo-basic .ant-layout-header,
#components-layout-demo-basic .ant-layout-footer {
  background: #7dbcea;
  color: #fff;
}
#components-layout-demo-basic .ant-layout-footer {
  line-height: 1.5;
}
#components-layout-demo-basic .ant-layout-sider {
  background: #3ba0e9;
  color: #fff;
  line-height: 120px;
}
#components-layout-demo-basic .ant-layout-content {
  background: rgba(16, 142, 233, 1);
  color: #fff;
  min-height: 120px;
  line-height: 120px;
}
#components-layout-demo-basic > .ant-layout {
  margin-bottom: 48px;
}
#components-layout-demo-basic > .ant-layout:last-child {
  margin: 0;
}
</style>